<template>
  <div class="data-table bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
    <!-- 表格标题 -->
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
        {{ tableData.title }}
      </h3>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
        共 {{ tableData.rows.length }} 条记录
      </p>
    </div>

    <!-- 表格内容 -->
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <!-- 表头 -->
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th
              v-for="column in tableData.columns"
              :key="column.key"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
            >
              {{ column.title }}
            </th>
          </tr>
        </thead>
        
        <!-- 表体 -->
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          <tr 
            v-for="(row, index) in tableData.rows" 
            :key="index"
            class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150"
          >
            <td
              v-for="column in tableData.columns"
              :key="column.key"
              class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"
            >
              <span v-if="column.type === 'number'" class="font-mono">
                {{ formatNumber(row[column.key]) }}
              </span>
              <span v-else-if="column.type === 'date'" class="text-gray-600 dark:text-gray-400">
                {{ formatDate(row[column.key]) }}
              </span>
              <span v-else>
                {{ row[column.key] || '-' }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 空状态 -->
    <div v-if="tableData.rows.length === 0" class="text-center py-12">
      <div class="text-gray-400 dark:text-gray-500 mb-2">
        <svg class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-6l-2 2h-4l-2-2H4" />
        </svg>
      </div>
      <p class="text-gray-500 dark:text-gray-400">暂无数据</p>
    </div>

    <!-- 表格操作按钮 -->
    <div v-if="showActions" class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
      <div class="flex space-x-3">
        <button
          @click="$emit('export')"
          class="btn-secondary text-sm"
        >
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
          导出数据
        </button>
        
        <button
          @click="$emit('generateChart')"
          class="btn-primary text-sm"
        >
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
          生成图表
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { format } from 'date-fns'

interface Column {
  key: string
  title: string
  type: 'string' | 'number' | 'date'
}

interface TableData {
  title: string
  tableName?: string
  columns: Column[]
  rows: Record<string, any>[]
}

defineProps<{
  tableData: TableData
  showActions?: boolean
}>()

defineEmits<{
  export: []
  generateChart: []
}>()

const formatNumber = (value: any) => {
  if (value === null || value === undefined || value === '') return '-'
  const num = parseFloat(value)
  if (isNaN(num)) return value
  return num.toLocaleString()
}

const formatDate = (value: any) => {
  if (!value) return '-'
  try {
    const date = new Date(value)
    if (isNaN(date.getTime())) return value
    return format(date, 'yyyy-MM-dd HH:mm:ss')
  } catch {
    return value
  }
}
</script>

<style scoped>
.data-table {
  @apply overflow-hidden;
}

.btn-primary {
  @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200;
}

.btn-secondary {
  @apply inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 text-sm leading-4 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200;
}
</style>
